<template>
  <h1>{{ num }}</h1>
  <button @click="num++">点击触发</button>
  <hr>
  <h1>{{ obj.age }}</h1>
  <button @click="obj.age++">点击</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
import {watch,reactive,ref} from 'vue'
// 1. 定义基本类型的数据
  let num = ref(0)
  // watch(监听源,回掉,配置)
    watch(num,(newVal,oleVal)=>{
      console.log(newVal,oleVal);
    },{
      immediate:true // 立即监听一次
    })
// 2. 监听 引用类型的 属性(基本类型);
    let obj = ref({
      name: "张三",
      age: 20,
      cart: {
        name: "宝马",
      }
    })
    // 任意一个值改变 都会把监听到
    watch([num,obj],(newVal,oldVal)=>{
      // newVal [num的newVal,obj的newVal]
      // oldVal [num的oldVal,obj的oldVal]
      console.log(newVal,oldVal);
    },{
      deep:true
    })
</script>
<script>
export default {
  name: 'App',
}
</script>
